<template>
  <div class="file-manager">
    <!-- Top Navigation -->
    <top-nav
      :username="username"
      v-model:is-dark="isDark"
    />

    <!-- Main Content -->
    <div class="main-content">
      <!-- Breadcrumb -->
      <div class="breadcrumb-container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item 
            v-for="(item, index) in breadcrumbItems" 
            :key="index"
            @click="handleBreadcrumbClick(item)"
          >
            {{ item.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>

        <!-- Search -->
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索文件"
            :prefix-icon="Search"
          />
        </div>
      </div>

      <!-- File List -->
      <div class="file-list">
        <el-table
          :data="filteredFiles"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="名称" min-width="300">
            <template #default="{ row }">
              <div class="file-name" @click="handleFileClick(row)">
                <el-icon class="file-icon">
                  <component :is="row.type === 'folder' ? 'Folder' : 'Document'" />
                </el-icon>
                <span>{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="uploadDate" label="上传日期" width="200" />
          <el-table-column prop="size" label="大小" width="150" />
          <el-table-column prop="knowledgeBase" label="知识库" width="150">
            <template #default="{ row }">
              <el-tag size="small" v-if="row.knowledgeBase">{{ row.knowledgeBase }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button-group>
                <el-button type="primary" link>
                  <el-icon><Download /></el-icon>
                </el-button>
                <el-button type="primary" link v-if="row.type !== 'folder'">
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button type="primary" link>
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- Pagination -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Search,
  Document,
  Folder,
  Download,
  View,
  Delete
} from '@element-plus/icons-vue'
import TopNav from '../components/TopNav.vue'

const router = useRouter()
const route = useRoute()

// Data
const username = ref('qinzhenlong')
const isDark = ref(false)
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// Mock file system data structure
const fileSystem = {
  'root': [
    {
      name: 'test',
      type: 'folder',
      uploadDate: '16/04/2025 13:42:32',
      size: '-',
      knowledgeBase: null
    }
  ],
  'root/test': [
    {
      name: '招聘.txt',
      type: 'file',
      uploadDate: '16/04/2025 13:42:32',
      size: '3.02 KB',
      knowledgeBase: 'test'
    },
    {
      name: '能监办大模型交流要点.docx',
      type: 'file',
      uploadDate: '16/04/2025 12:57:28',
      size: '3,695.35 KB',
      knowledgeBase: 'test'
    },
    {
      name: 'test',
      type: 'folder',
      uploadDate: '16/04/2025 13:42:32',
      size: '-',
      knowledgeBase: null
    }
  ],
  'root/test/test': [
    {
      name: '招聘.txt',
      type: 'file',
      uploadDate: '16/04/2025 13:42:32',
      size: '3.02 KB',
      knowledgeBase: 'test'
    }
  ]
}

// Current files list
const files = ref([])

// Get current path key for fileSystem
const getCurrentPathKey = () => {
  const segments = route.path.split('/').filter(Boolean)
  if (segments.length === 1 && segments[0] === 'files') {
    return 'root'
  }
  return ['root', ...segments.slice(1)].join('/')
}

// Get current folder name
const getCurrentFolderName = () => {
  const segments = route.path.split('/').filter(Boolean)
  return segments[segments.length - 1]
}

// Update files based on current path
const updateFiles = () => {
  const pathKey = getCurrentPathKey()
  const currentFolder = getCurrentFolderName()
  
  // Get files from current path
  const currentFiles = fileSystem[pathKey] || []
  
  // Filter out the current folder from the list
  files.value = currentFiles.filter(file => file.name !== currentFolder)
  total.value = files.value.length
}

// Watch route changes to update file list
watch(() => route.path, () => {
  updateFiles()
}, { immediate: true })

// Computed
const filteredFiles = computed(() => {
  if (!searchQuery.value) return files.value
  const query = searchQuery.value.toLowerCase()
  return files.value.filter(file => 
    file.name.toLowerCase().includes(query)
  )
})

// 面包屑导航
const breadcrumbItems = computed(() => {
  const segments = route.path.split('/').filter(Boolean)
  const items = [{ name: 'root', path: '/files' }]
  
  if (segments.length === 1 && segments[0] === 'files') {
    return items
  }

  let currentPath = '/files'
  segments.slice(1).forEach(segment => {
    currentPath += `/${segment}`
    items.push({
      name: segment,
      path: currentPath
    })
  })

  return items
})

// Methods
const handleFileClick = (file) => {
  if (file.type === 'folder') {
    router.push(`${route.path}/${file.name}`)
  }
}

const handleBreadcrumbClick = (item) => {
  router.push(item.path)
}
</script>

<style scoped lang="scss">
.file-manager {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color-page);
}

.main-content {
  flex: 1;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.breadcrumb-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);

  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .search-box {
    width: 300px;
  }
}

.file-list {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
  margin-bottom: 24px;

  .file-name {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }

    .file-icon {
      font-size: 20px;
      color: var(--el-text-color-secondary);
    }
  }

  :deep(.el-button-group) {
    .el-button {
      padding: 0 8px;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
}
</style> 